<template>
    <div class="box">
        <div class="container">
            <video class="video" muted src="http://chst.vip:8081/crm/media/bg-video.d2d602a9.mp4" loop="loop"
                autoplay="true"></video>
        </div>
        <!--  -->
        <div class="Login">
            <!-- 普通登录 -->
            <div class="comContainer">
                <div class="textStyle">
                    <h1>千锋管理系统</h1>
                </div>
                <i @click="changeLoginType" :class="['jiaobiao', 'iconfont',jiaobiaoType]"></i>


                <div>
                    <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px"
                        class="demo-ruleForm">
                        <!-- 常规登入 -->
                        <commontLogin @changeSmsType="changeSmsType" @syncHandle="handleCommont" @submit="submitForm" ref="commonLogin" v-if="loginType==='common'" />

                        <!-- 二维码登入 -->
                        <codeLogin :storageUserInfo="storageUserInfo" v-else-if="loginType==='qrcode'"/>

                        <!-- 手机验证码登入 -->
                        <msgLogin :storageUserInfo="storageUserInfo"  v-else/>



                    </el-form>

                </div>

            </div>






        </div>
    </div>


</template>
<script>
import commontLogin from "@/components/Login/commontLogin/index.vue"
import storage from "@/utils/storage"
import codeLogin from "@/components/Login/codeLogin/index.vue"
import msgLogin from "@/components/Login/msgLogin/index.vue"
import * as api from "@/api/user"


// 校验验证码
var validateCaptcha = (rule, value, callback) => {
    if (value.length == 5) {
        callback()
    } else {
        callback("请正确输入验证码")
    }
};
// 校验用户名
var validateUsername = (rule, value, callback) => {
    let uPattern = /^[a-zA-Z0-9_-]{3,16}$/
    if (uPattern.test(value)) {
        callback()
    } else {
        callback("3-16字母数字下划线")
    }
};
// 校验密码
var validatePassword = (rule, value, callback) => {
    if (value.length >= 3) {
        callback()
    } else {
        callback("密码不能少于3位")
    }
};
export default {
    data() {

        return {
            // common常规登入 |qrcode二维码|sms：短信验登入
            loginType: 'common',
            loginForm: {
                username: '',
                password: '',
                captcha: ''
            },
            rules: {
                username: [
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
                captcha: [
                    { validator: validateCaptcha, trigger: 'blur' }
                ]
            }
        };
    },
    components: {
        commontLogin,
        codeLogin,
        msgLogin

    },
    // 计算属性
    computed:{
        jiaobiaoType(){
            if(this.loginType==="common"){
                return "icon-erweimajiaobiao"
            }
            if(this.loginType==="qrcode" ||this.loginType==="sms"){
                return 'icon-diannaojiaobiao'
            }
        }
    },
    methods: {
        // 更改成短信登入
        changeSmsType(){
            this.loginType="sms"
        },
        // 更改登入方式
        changeLoginType(){
            if(this.loginType==="common"){
                this.loginType="qrcode"
            }else if(this.loginType==="qrcode"){
                this.loginType="common"
            }else if(this.loginType==="sms"){
                this.loginType="common"
            }
        },
        handleCommont(newformVal) {
            this.loginForm = newformVal
            // console.log(newformVal)
        },
        // 表单提交
        submitForm() {
            this.$refs["loginForm"].validate((valid) => {
                if (valid) {
                    api.verifyCaptchaApi(this.loginForm.captcha)
                        .then(async res => {
                            if (res.data.state) {
                                // 验证码校验通过 校验用户名和密码
                                // 从表单中解构用户名和密码
                                let { username, password } = this.loginForm
                                let res = await api.loginApi(username, password)
                                //    console.log(res)
                                // 登入成功
                                if (res.data.state) {
                                    // 存储用户信息到本地
                                    this.storageUserInfo(res.data)

                                    // 跳转到主页
                                    this.$router.push("/")
                                }


                            } else {
                                // 验证码校验不通过 刷新验证码
                                this.$refs['commonLogin'].getCaptcha()

                            }
                        })

                } else {
                    // 本地校验不通过
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //   封装一个方法 用于存储用户的信息和token
        storageUserInfo({ userInfo, token, permission }) {
            // 将信息储存到vuex
            this.$store.commit("users/SET_USERINFO",userInfo)
            storage.set("userInfo", userInfo)
            storage.set("qf-token", token)
            storage.set("permission", permission)

        },

    },



}

</script>
<style lang="less" scoped>
.jiaobiao {
    font-size: 60px;
    color: #fff;
    position: absolute;
    top: -1px;
    right: -1px;
    cursor: pointer;
    opacity: 0.7;
}

.box {
    position: relative;
}

.el-input {
    /deep/ .el-input__inner {
        width: 250px;
    }
}

.container {

    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.Login {
    width: 450px;
    height: 550px;
    // border: 1px solid black;
    background-color: rgba(0, 0, 0, 0.4);
    // display: flex;
    // justify-content: center;
    // align-items: center;
    position: absolute;
    right: 100px;
    top: 130px;

}

.textStyle {
    color: white;
    text-align: center;
    margin: 60px 0 40px 0;

}

.submit {

    margin-top: 50px;
}
</style>